<template>
  <view :data-theme="globPrimary">
    <u-navbar
      :border-bottom="false"
      :back-icon-color="navbarStyle.iconColor"
      :immersive="true"
      :background="navbarStyle.backgroundColor"
    ></u-navbar>
    <view class="head_page">
      <view class="seat"></view>
      <view class="mechanism-header">
        <view style="margin-top: 38rpx; margin-left: 30rpx">
          <edu-image width="140" height="140" border-radius="70" :src="info.logo_url"></edu-image>
        </view>
        <view class="header-right">
          <view class="header-title u-line-1">{{ info.title }}</view>
          <view class="header-text u-line-2">{{ info.intro }}</view>
        </view>
      </view>
    </view>

    <!-- 推荐课程 -->
    <view class="recommendCourse">
      <view class="recommenHead">
        <view class="recommen">推荐课程</view>
        <view class="lookall" @click="toLink('pageFound/school/course', homeData.info.id)"
          >查看全部</view
        >
      </view>
      <view class="courseItem">
        <view
          class="couserMoudle"
          v-for="(i, index) in homeData.course"
          :key="index"
          @click="toLink('pageCourse/course/details', i.id)"
        >
          <courseImage
            width="100%"
            height="186"
            :image="i.cover_url"
            :courseType="i.course_type"
            :courseTypeText="i.course_type_text"
          ></courseImage>
          <view class="heading u-line-1">{{ i.title }}</view>
          <view class="courseMsg">
            <view class="person_num">{{ i.sale_count }}人在学</view>
            <view class="course_money">¥{{ i.price }}</view>
          </view>
        </view>
      </view>
      <edu-empty v-if="isDataEmpty[0]"></edu-empty>
    </view>

    <!-- 推荐讲师模块 -->
    <home-teacher
      :data="homeData.teacher"
      :organId="organId"
      :isNull="isDataEmpty[1]"
    ></home-teacher>
    <!-- 推荐咨询 -->
    <view class="consult">
      <view class="consultHead">
        <view class="consultLeft">推荐资讯</view>
        <view class="lookall" @click="look">查看全部</view>
      </view>
      <view
        class="consultItem"
        v-for="(i, index) in homeData.topic"
        :key="index"
        @click="toTopic('/pageFound/topic/details', i.id)"
      >
        <view class="consultItem-left">
          <view class="consult-title u-line-1">{{ i.title }}</view>
          <view class="consult-content">{{ i.abstract }}</view>
          <view class="consult-bottom">
            <u-icon name="eye"></u-icon>
            <view class="eye-num">{{ i.read_count }}</view>
            <view class="line"></view>
            <view class="day">{{ i.publish_time | filtime }}</view>
          </view>
        </view>
        <view class="imgItem">
          <course-image width="100%" height="144" :image="i.cover_url"></course-image>
        </view>
      </view>
      <edu-empty v-if="isDataEmpty[2]"></edu-empty>
    </view>

    <!-- 底部 -->
    <view class="bottom-msg">
      <view class="bottom-line"></view>
      <view class="end">我是有底线的</view>
      <view class="bottom-line"></view>
    </view>
  </view>
</template>

<script>
import homeTeacher from './components/teacher.vue'
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    homeTeacher,
    courseImage,
  },
  data() {
    return {
      organId: '', //机构id
      navbarStyle: {
        iconColor: '#ffffff',
        backgroundColor: {
          backgroundColor: 'transparent',
        },
      },
      homeData: {},
      info: {},
      isDataEmpty: [false, false, false],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  filters: {
    filtime(val) {
      var minute = 1000 * 60
      var hour = minute * 60
      var day = hour * 24
      var halfamonth = day * 15
      var month = day * 30
      var now = new Date().getTime()
      var diffValue = now - val * 1000
      if (diffValue < 0) {
        return '刚刚'
      }
      var monthC = diffValue / month
      var weekC = diffValue / (7 * day)
      var dayC = diffValue / day
      var hourC = diffValue / hour
      var minC = diffValue / minute
      if (monthC > 12) {
        // 超过1年，直接显示年月日
        return (function () {
          var date = new Date(val * 1000)
          return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        })()
      } else if (monthC >= 1) {
        return parseInt(monthC) + '个月前'
      } else if (weekC >= 1) {
        return parseInt(weekC) + '周前'
      } else if (dayC >= 1) {
        return parseInt(dayC) + '天前'
      } else if (hourC >= 1) {
        return parseInt(hourC) + '小时前'
      } else if (minC >= 1) {
        return parseInt(minC) + '分钟前'
      }
      return '刚刚'
    },
  },
  onLoad(option) {
    this.organId = option.id
    this.getData(option.id)
  },
  onPageScroll(e) {
    this.pageScroll(e)
  },
  methods: {
    //导航栏渐变
    pageScroll(e) {
      let color = '#ffffff'
      let fontColor = '#ffffff'
      let opacity = 0
      let tmpY = 180
      if (e.scrollTop && e.scrollTop > 80) {
        if (e.scrollTop > tmpY) {
          opacity = 1
          fontColor = '#303133'
        } else {
          opacity = (e.scrollTop - 80) / 100
        }
      } else {
        opacity = 0
        fontColor = '#ffffff'
      }
      let rgbaBg = this.$u.colorToRgba(color, opacity)
      this.navbarStyle.backgroundColor = {
        backgroundColor: rgbaBg,
      }
      this.navbarStyle.iconColor = fontColor
    },
    getData(id) {
      this.$edu.api.getSchoolHome(id).then((res) => {
        if (res.data.course.length == 0) {
          this.isDataEmpty[0] = true
        }
        if (res.data.teacher.length == 0) this.isDataEmpty[1] = true
        if (res.data.topic.length == 0) this.isDataEmpty[2] = true
        this.homeData = res.data
        this.info = res.data.info
      })
    },
    look() {
      this.$u.route('pageFound/topic/index', {
        mhm_id: this.organId,
      })
    },
    toLink(url, id) {
      this.$u.route(url, {
        id: id,
      })
    },
    toTopic() {
      this.$edu.route(url, {
        id: id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.head_page {
  height: 318rpx;
  width: 100%;
  @include bg-color();
  overflow: hidden;
}

.seat {
  height: 88rpx;
  width: 100%;
  @include bg-color();
}

.mechanism-header {
  height: 230rpx;
  width: 100%;
  @include bg-color();
  overflow: hidden;
  display: flex;
  flex-direction: row;
  background-image: url('@/static/images/study_card_img.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header-right {
    height: 140rpx;
    width: 65%;
    margin-left: 40rpx;
    margin-top: 38rpx;

    .header-title {
      height: 45rpx;
      line-height: 45rpx;
      margin-top: 9rpx;
      font-weight: bold;
      color: #ffffff;
      font-size: 32rpx;
    }

    .header-text {
      margin-top: 15rpx;
      height: 66rpx;
      line-height: 33rpx;
      font-size: 24rpx;
      color: #ffffff;
      white-space: pre-wrap;
    }
  }
}

.recommendCourse {
  width: 100%;
  height: auto;
  background-color: white;
  padding-left: 30rpx;
  padding-right: 30rpx;
  overflow: hidden;

  .recommenHead {
    margin-top: 40rpx;
    margin-bottom: 2rpx;
    height: 53rpx;
    display: flex;
    line-height: 53rpx;
    justify-content: space-between;

    .recommen {
      font-weight: 600;
      font-size: 38rpx;
      color: #303133;
    }

    .lookall {
      font-size: 28rpx;
      color: #909399;
      font-weight: 400;
    }
  }

  .courseItem {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    padding-bottom: 70rpx;

    .couserMoudle {
      margin-top: 46rpx;
      height: auto;
      width: 335rpx;
      background-color: white;

      .heading {
        height: 40rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 30rpx;
        color: #303133;
        font-weight: bold;
        margin-top: 12rpx;
      }

      .courseMsg {
        height: 42rpx;
        line-height: 42rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 27rpx;

        .person_num {
          color: #888888;
          font-size: 24rpx;
        }

        .course_money {
          color: #f54030;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.consult {
  margin-top: 16rpx;
  padding: 0 30rpx;
  height: auto;
  background-color: white;
  overflow: hidden;

  .consultHead {
    margin-top: 40rpx;
    margin-bottom: 15rpx;
    height: 53rpx;
    display: flex;
    line-height: 53rpx;
    justify-content: space-between;

    .consultLeft {
      font-weight: 600;
      font-size: 38rpx;
      color: #303133;
    }

    .lookall {
      font-size: 28rpx;
      color: #909399;
      font-weight: 400;
    }
  }

  .consultItem {
    height: 203rpx;
    display: flex;
    justify-content: space-between;

    .consultItem-left {
      height: 100%;
      width: 425rpx;
      overflow: hidden;

      .consult-title {
        height: 44rpx;
        font-size: 30rpx;
        color: #303133;
        font-weight: bold;
        margin-top: 32.5rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .consult-content {
        height: 40rpx;
        line-height: 40rpx;
        font-size: 26rpx;
        color: #606266;
        margin-top: 8rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .consult-bottom {
        height: 37rpx;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        margin-top: 20rpx;

        image {
          height: 17rpx;
          width: 26rpx;
          margin-top: 10rpx;
        }

        .eye-num {
          height: 37rpx;
          line-height: 37rpx;
          color: #909399;
          font-size: 26rpx;
          margin-left: 8rpx;
        }

        .line {
          height: 16rpx;
          width: 1.5px;
          background-color: #e4e7ed;
          margin-top: 10rpx;
          margin-left: 20rpx;
          margin-right: 20rpx;
        }

        .day {
          font-size: 26rpx;
          color: #909399;
          line-height: 37rpx;
          line-height: 37rpx;
        }
      }
    }

    .imgItem {
      height: 144rpx;
      width: 256rpx;
      margin-top: 37.5rpx;
      overflow: hidden;
    }
  }
}

.consult .consultItem:not(:last-child) {
  border-bottom: 1px solid #f7f7f7;
}

.bottom-msg {
  height: 100rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .bottom-line {
    height: 1px;
    width: 77rpx;
    background-color: #b7bac1;
    margin-top: 49rpx;
  }

  .end {
    font-size: 24rpx;
    color: #909399;
    line-height: 100rpx;
    margin-left: 14rpx;
    margin-right: 14rpx;
  }
}
</style>
